<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  <title>众茶国际</title>

  <script src="../vueJS/vue.js"></script>  
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../ElementUI/index.css">
  <!-- 引入组件库 -->
  <script src="../ElementUI/index.js"></script>
</head>
<body>
  <div id="app">
    <div class="item_bg">
      <div class="title">1.姓名：</div>
      <div class="content">{{ printDetail.name }}</div>
    </div>
    <div class="item_bg">
      <div class="title">2.称谓：</div>
      <div v-if="printDetail.sex == 1" class="content">先生</div>
      <div v-else class="content">女士</div>
    </div>
    <div class="item_bg">
      <div class="title">3.联系电话</div>
      <div class="content">{{ printDetail.phone }}</div>
    </div>
    <div class="item_bg">
      <div class="title">4.公司/个体户名称：</div>
      <div class="content">{{ printDetail.companyName }}</div>
    </div>
    <div class="item_bg">
      <div class="title">5.在东莞工行开立公司账户：</div>
      <div v-if="printDetail.companyNo == 1" class="content">有</div>
      <div v-else class="content">无</div>
    </div>
    <div class="item_bg">
      <div class="title">6.年营收：（单位：万元）：</div>
      <div class="content">{{ printDetail.companyAmount }}</div>
    </div>
    <div class="item_bg">
      <div class="title">7.税务等级：</div>
      <div v-if="printDetail.level == 'A'" class="content">A</div>
      <div v-if="printDetail.level == 'B'" class="content">B</div>
      <div v-if="printDetail.level == 'M'" class="content">M</div>
    </div>
    <div class="item_bg">
      <div class="title">8. 融资需求额度：（单位：万元）</div>
      <div class="content">{{ printDetail.needAmount }}</div>
    </div>
  </div>
</body>

<script type="text/javascript">
  new Vue({
    el:'#app',
    data:{
      printDetail: {}
    },
    computed: {},
    watch: {},
    methods: {
      updateUI() {
        this.$forceUpdate();
      },
    },
    created() {
      
    },
    mounted() {
      window.parent.postMessage({status: 'isReady'}, '*')

      window.addEventListener('message', messageEvent=> {
        if(messageEvent.source!=window.parent.window.parent) return;
          
        if (messageEvent.data && messageEvent.data.option) {
          if (messageEvent.data.option == 'doPrint') {
            window.print()
          }
        } else if (messageEvent.data) {
          this.printDetail = messageEvent.data.data
          this.updateUI()
        }
      })
    },
  })
</script>

<style lang='scss' scoped>
  .item_bg {
    margin-bottom: 10px;
    .title {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
    }

    .content {
      padding-left: 10px;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      border: 1px lightgray solid;
      border-radius: 5px;
    }
  }

  .cover_bg {
    position: relative;
    height: 21px;

    .cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
</style>
</html>